import React from "react";
import { Layout, Menu, Card, Table, Pagination, Space } from "antd";
import { Link } from "react-router-dom";
import styles from "./index.less";

const { Sider, Content } = Layout;

const Home: React.FC = () => {
  const columns = [
    {
      title: "投产规划编号",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "投产规划名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "申报中心",
      dataIndex: "center",
      key: "center",
    },
    {
      title: "投产计划实施时间",
      dataIndex: "time",
      key: "time",
    },
    {
      title: "提交人",
      dataIndex: "submitter",
      key: "submitter",
    },
    {
      title: "规划提审时间",
      dataIndex: "submitTime",
      key: "submitTime",
    },
    {
      title: "审批通过时间",
      dataIndex: "approveTime",
      key: "approveTime",
    },
    {
      title: "投产规划状态",
      dataIndex: "status",
      key: "status",
      render: (status: string) => {
        let color = "default";
        switch (status) {
          case "待提交":
            color = "default";
            break;
          case "审批通过":
            color = "success";
            break;
          case "无需申报":
            color = "processing";
            break;
          case "强行终止":
            color = "error";
            break;
          default:
            color = "default";
        }
        return (
          <span
            style={{ color: color === "default" ? "#666" : undefined }}
            data-oid="-6gvvvv"
          >
            {status}
          </span>
        );
      },
    },
    {
      title: "操作",
      key: "action",
      render: () => (
        <Link to="#" data-oid="zw8v:l9">
          查看
        </Link>
      ),
    },
  ];

  const data = [
    {
      key: "1",
      id: "GH-JC-2025030101",
      name: "2025年基础设施研发中心投产规划(2025-05-01-2025-06-30)",
      center: "基础设施研发中心",
      time: "2025.05.01-2025.06.30",
      submitter: "",
      submitTime: "",
      approveTime: "",
      status: "待提交",
    },
    {
      key: "2",
      id: "GH-PF-2025030101",
      name: "2025年批发应用研发中心投产规划(2025-05-01-2025-06-30)",
      center: "批发应用研发中心",
      time: "2025.05.01-2025.06.30",
      submitter: "朱文熙/YC02753",
      submitTime: "2025-03-03 14:46:41",
      approveTime: "2025-03-03 14:48:31",
      status: "审批通过",
    },
  ];

  return (
    <Layout className={styles.container} data-oid="7-0ah2p">
      <Sider width={200} className={styles.sider} data-oid="_.dwrpm">
        <Menu
          mode="inline"
          defaultSelectedKeys={["1"]}
          style={{ height: "100%", borderRight: 0 }}
          data-oid="godz1u4"
        >
          <Menu.Item key="1" data-oid="922p_6.">
            上线日历表
          </Menu.Item>
          <Menu.Item key="2" data-oid="1rw:zwn">
            T+2报表
          </Menu.Item>
          <Menu.Item key="3" data-oid="j4u1p7_">
            上线周报表
          </Menu.Item>
          <Menu.Item key="4" data-oid="79oliq_">
            卡中心上线报表
          </Menu.Item>
          <Menu.Item key="5" data-oid="lf7z:p:">
            Label策略管理
          </Menu.Item>
        </Menu>
      </Sider>
      <Content className={styles.content} data-oid="09dc5lu">
        <Card className={styles.titleCard} data-oid=".rre2o.">
          <h3 data-oid="ee7jupx">重要业务系统投产规划(中心)</h3>
        </Card>
        <Card className={styles.tableCard} data-oid="6dbe2s8">
          <Table
            columns={columns}
            dataSource={data}
            pagination={false}
            size="middle"
            data-oid="kfgav4r"
          />

          <div className={styles.pagination} data-oid=".-s54y8">
            <span data-oid="54s6kg:">共31条</span>
            <Space data-oid="1genh9_">
              <Pagination
                total={31}
                pageSize={10}
                showSizeChanger={false}
                showQuickJumper={false}
                data-oid="8bovnlo"
              />
            </Space>
          </div>
        </Card>
      </Content>
    </Layout>
  );
};

export default Home;
